import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SliverGridExample());
  }
}

class SliverGridExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Mixed Items with SliverChildBuilderDelegate")),
      body:
      SizedBox(child:
      CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: [
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 5,
              childAspectRatio: 1, // Adjust aspect ratio to control item height
            ),
            delegate: SliverChildBuilderDelegate(
                  (context, index) {
                return Container(
                  width: (index % 4 == 0) ? 50 : 60, // Custom width for items
                  color: (index % 2 == 0) ? Colors.tealAccent:Colors.teal,
                  // height: (index % 2 == 0) ? 200 : 300, // Different heights for items
                  child: Center(child: Text('Item $index')),
                );
              },
              childCount: 20,
            ),
          )
        ],
      )
      ),
    );
  }
}

